import React, { useEffect, Fragment } from 'react';
import { history, connect, formatMessage } from 'umi';
import { Card, Row, Col, Divider, Empty } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// import AuthComponent from '@/utils/auth/AuthComponent';
// import AuthCode from '@/utils/auth/AuthCode';
import authHelpr from '@/utils/auth/helper';
import { withRoutePage } from '@/utils/enhanceUtils';
import updateQuery from '@/utils/formValuesToQuery';
import { get as getPath } from 'object-path';
import FlowIcon from '@/components/BizIcon/FlowIcon';
import { Company } from '@/containers';
import styles from './index.less';

const { checkCode } = authHelpr;

const getCompanyId = (user, query) => {
    const userCompanyId = user ? user.companyId : '';
    return query.companyId || userCompanyId;
};

const RenderRuleList = props => {
    const {
        loading,
        data
        // user,
        // location: { query }
    } = props;
    // const localCompanyId = getCompanyId(user, query);
    const workflowList = getPath(data, 'ruleConfigDTOList', []);
    return (
        <Card
            className={styles.fixCard}
            headStyle={{ borderBottom: 0 }}
            title={`${getPath(data, 'categoryName')}`}
            bordered={false}
            loading={loading.effects['ruleManagement/fetchRuleList']}
        >
            {workflowList.map((item, index) => (
                <React.Fragment key={item.id}>
                    <Row>
                        <Col span={12}>
                            <FlowIcon isAntdIcon iconType={item.iconType} className={styles.icon} />
                            <div
                                style={{
                                    marginLeft: '54px'
                                }}
                            >
                                <div className={styles.title2}>{item.ruleConfigName}</div>
                                <div className={styles.content} title={item.description}>
                                    {item.description}
                                </div>
                            </div>
                        </Col>
                        <Col span={8}>
                            <div className={styles.title2}>
                                {formatMessage({
                                    id: 'settings.ruleManage.title'
                                })}
                            </div>
                            <div className={styles.content} title={item.ruleObject.ruleVO.institutionName}>
                                <a
                                    onClick={() =>
                                        history.push({
                                            pathname: '/office/institutions/rulesManage/institutionsDetail',
                                            query: {
                                                id: item.ruleObject.ruleVO.institutionId
                                            }
                                        })
                                    }
                                >
                                    {item.ruleObject.ruleVO.institutionName}
                                </a>
                            </div>
                        </Col>
                        <Col span={4} className={styles.action}>
                            <div className={styles.flex2}>
                                {checkCode('system:ruleconfig:detail') ? (
                                    <a
                                        onClick={() =>
                                            history.push({
                                                pathname: '/setting/ruleManagement/detail',
                                                query: {
                                                    id: item.ruleObject.id || 0,
                                                    companyid: item.ruleObject.companyCode
                                                },
                                                state: { tabRoute: true, tabRefresh: true }
                                            })
                                        }
                                    >
                                        查看规则
                                    </a>
                                ) : (
                                    ''
                                )}
                                {checkCode('system:ruleconfig:edit') ? (
                                    <Fragment>
                                        <Divider type="vertical" />
                                        <a
                                            onClick={() =>
                                                history.push({
                                                    pathname: '/setting/ruleManagement/edit',
                                                    query: {
                                                        id: item.ruleObject.id || 0,
                                                        companyid: item.ruleObject.companyCode
                                                    }
                                                    // state: { tabRoute: true, tabRefresh: true }
                                                })
                                            }
                                        >
                                            配置规则
                                        </a>
                                    </Fragment>
                                ) : (
                                    ''
                                )}
                            </div>
                        </Col>
                    </Row>
                    {index === workflowList.length - 1 ? '' : <Divider />}
                </React.Fragment>
            ))}
        </Card>
    );
};
const RuleManagementList = props => {
    const {
        dispatch,
        location: { query },
        match,
        ruleManagement: { ruleList }
    } = props;
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
    const localCompanyId = getCompanyId(user, query);

    const updateQueryFunc = obj => {
        updateQuery(match.path, { ...obj });
    };
    const companyChange = e => {
        updateQueryFunc({ companyId: e });
    };
    const fetchData = () => {
        dispatch({
            type: 'ruleManagement/fetchRuleList',
            payload: {
                id: localCompanyId
            }
        });
    };

    useEffect(() => {
        fetchData();
    }, [localCompanyId]);
    return (
        <PageHeaderWrapper>
            <Card bordered={false}>
                <div className={styles.head}>
                    <span className={styles.label}>
                        {formatMessage({
                            id: 'settings.ruleManage.companyLabel'
                        })}
                    </span>
                    <Company
                        value={localCompanyId}
                        onChange={companyChange}
                        style={{ width: 240 }}
                        placeholder="请选择行政机构"
                        getPopupContainer={triggerNode => triggerNode.parentElement}
                        requestParams={{ organizationPermissions: 0 }}
                    />
                </div>
            </Card>

            {ruleList && ruleList.length > 0 ? (
                ruleList.map(item => <RenderRuleList {...props} data={item} key={item.category} />)
            ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
        </PageHeaderWrapper>
    );
};

export default withRoutePage(
    connect(({ loading, ruleManagement, user }) => ({
        user,
        loading,
        ruleManagement
    }))(RuleManagementList)
);
